<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>


		<div id="mywordcloud" style="height:800px;   width: 100%; border: solid 1px red;">

		</div>
		<script src="../vendor/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../js/js2wordcloud.js"></script>
		<script type="text/javascript">
			function getnum() {
				return parseInt(Math.random() * 100)
			}

			function load(name) {
				let xhr = new XMLHttpRequest(),
					okStatus = document.location.protocol === "file:" ? 0 : 200;
				xhr.open('GET', name, false);
				xhr.overrideMimeType("text/html;charset=utf-8"); //默认为utf-8
				xhr.send(null);
				return xhr.status === okStatus ? xhr.responseText : null;
			}
			//读取文件构造数组
			let text = load('../data/wordcloud2.txt');
			var arr1 = text.split("\n");
			var arr2 = new Array();
			var arr3 = new Array();
			for (var i = 0; i < arr1.length - 1; i++) {
				arr2 = arr1[i].split(",");
				arr3[i] = new Array();				 
				arr3[i][0] = arr2[0];
				arr3[i][1] = parseInt(arr2[1]);

			}
			var color = ["#000000", "#444444","#888888", "#534121", "#ff0000", "#fc666d","#f6ca75", "#ffff00", "#f7fd8f", "#c602cd", "#f65afc",
				"#a152ca","#404d92","#0000ff","#80f4fe","#02c9db","#7e71fe","#86fb7a","#108f03","#155c19"];
			 
			console.log(arr1);
			var option = {
				list: arr3,
				color(word, weight, fontSize, distance, theta) { //自定义颜色
					if (weight > 100) {
						return color[19];
					}
					return color[Math.floor((weight - 1) / 5)];
				},
				shape: 'circle',
				ellipticity: 1,
				minRotation: -1.57080,
				maxRotation: 15.57080,
				rotateRatio: .2,
				fontSizeFactor: 5, // 当词云值相差太大，可设置此值进字体行大小微调，默认0.1
				maxFontSize: 60, // 最大fontSize，用来控制weightFactor，默认60
				minFontSize: 20,
				gridSize: 10,
				ratationSteps: 2,
				rotationRation: .5,
				shuffle: 30,
				//shape: 'circle', //还可以选择‘cardioid’（苹果形或心形），‘star’（星形），默认是‘circle’，即圆形,‘diamond’（钻石），‘triangle-forward’（三角形），‘triangle’（三角形），‘pentagon’（五边形）
				// cardioid: 'diamond'
				cardioid: 'square'
			}
			var wc = new Js2WordCloud(document.getElementById('mywordcloud'))
			wc.setOption(option)
			window.onresize = function() {
				wc.resize()
			}
		</script>
	</body>
</html>
